<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>社交平台 - 精选内容轮播</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        :root {
            --primary: #165DFF;
            --primary-light: #E8F3FF;
            --secondary: #36CFC9;
            --dark: #1D2129;
            --gray: #86909C;
            --light: #F2F3F5;
            --border: #E5E6EB;
            --shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
            --shadow-hover: 0 6px 16px rgba(0, 0, 0, 0.1);
        }
        
        body {
            font-family: 'Inter', system-ui, -apple-system, sans-serif;
            background-color: #F7F8FA;
            color: var(--dark);
            line-height: 1.6;
        }
        
        .container {
            max-width: 1200px;
        }
        
        /* 导航栏样式 */
        .navbar {
            background-color: white;
            box-shadow: var(--shadow);
            padding: 0.75rem 1rem;
        }
        
        .navbar-brand {
            font-weight: 700;
            color: var(--primary);
            font-size: 1.5rem;
        }
        
        .nav-link {
            color: var(--dark);
            margin-left: 1rem;
            font-weight: 500;
            transition: color 0.2s;
        }
        
        .nav-link:hover, .nav-link.active {
            color: var(--primary);
        }
        
        /* 主内容区 */
        .main-content {
            padding: 3rem 0;
        }
        
        /* 页面标题 */
        .page-header {
            text-align: center;
            margin-bottom: 3rem;
            padding-bottom: 1.5rem;
            border-bottom: 1px solid var(--border);
        }
        
        .page-title {
            font-size: 2.25rem;
            font-weight: 700;
            margin-bottom: 0.75rem;
            color: var(--dark);
        }
        
        .page-desc {
            color: var(--gray);
            max-width: 700px;
            margin: 0 auto;
        }
        
        /* 轮播通用样式 */
        .carousel-section {
            margin-bottom: 4rem;
        }
        
        .carousel-header {
            margin-bottom: 1.5rem;
            padding-bottom: 0.75rem;
            border-bottom: 2px solid var(--primary-light);
            display: flex;
            align-items: center;
            justify-content: space-between;
        }
        
        .carousel-title {
            font-size: 1.5rem;
            font-weight: 600;
            margin-bottom: 0;
            display: flex;
            align-items: center;
        }
        
        .carousel-title i {
            color: var(--primary);
            margin-right: 0.75rem;
        }
        
        .carousel-more {
            color: var(--primary);
            text-decoration: none;
            font-weight: 500;
            display: flex;
            align-items: center;
        }
        
        .carousel-more i {
            margin-left: 0.25rem;
            transition: transform 0.2s;
        }
        
        .carousel-more:hover i {
            transform: translateX(3px);
        }
        
        /* 1. 全屏宽幅轮播 */
        .fullwidth-carousel .carousel-item {
            height: 500px;
            position: relative;
        }
        
        .fullwidth-carousel .carousel-img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        
        .fullwidth-carousel .carousel-caption {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            padding: 2rem;
            background: linear-gradient(transparent, rgba(0,0,0,0.8));
            text-align: left;
        }
        
        .fullwidth-carousel .carousel-title-lg {
            font-size: 1.8rem;
            font-weight: 700;
            margin-bottom: 0.5rem;
        }
        
        .fullwidth-carousel .carousel-text {
            font-size: 1rem;
            max-width: 700px;
            margin-bottom: 1rem;
        }
        
        .carousel-user {
            display: flex;
            align-items: center;
        }
        
        .carousel-avatar {
            width: 36px;
            height: 36px;
            border-radius: 50%;
            margin-right: 0.75rem;
        }
        
        .carousel-username {
            color: white;
            font-weight: 500;
        }
        
        /* 2. 卡片式轮播 */
        .card-carousel .carousel-inner {
            padding: 1rem 0;
        }
        
        .card-carousel .carousel-item {
            padding: 0 1rem;
        }
        
        .carousel-card {
            background-color: white;
            border-radius: 12px;
            overflow: hidden;
            box-shadow: var(--shadow);
            transition: transform 0.3s, box-shadow 0.3s;
            height: 100%;
        }
        
        .carousel-card:hover {
            transform: translateY(-5px);
            box-shadow: var(--shadow-hover);
        }
        
        .carousel-card-img {
            width: 100%;
            height: 200px;
            object-fit: cover;
        }
        
        .carousel-card-body {
            padding: 1.25rem;
        }
        
        .carousel-card-title {
            font-weight: 600;
            font-size: 1.1rem;
            margin-bottom: 0.5rem;
        }
        
        .carousel-card-text {
            font-size: 0.9rem;
            color: var(--gray);
            margin-bottom: 1rem;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }
        
        .carousel-card-meta {
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 0.85rem;
            color: var(--gray);
        }
        
        .carousel-card-likes {
            display: flex;
            align-items: center;
        }
        
        .carousel-card-likes i {
            color: var(--danger);
            margin-right: 0.25rem;
        }
        
        /* 3. 用户推荐轮播 */
        .user-carousel .carousel-inner {
            padding: 1rem 0;
        }
        
        .user-carousel .carousel-item {
            padding: 0 0.5rem;
        }
        
        .user-card {
            background-color: white;
            border-radius: 12px;
            padding: 1.5rem;
            text-align: center;
            box-shadow: var(--shadow);
            transition: transform 0.3s, box-shadow 0.3s;
        }
        
        .user-card:hover {
            transform: translateY(-5px);
            box-shadow: var(--shadow-hover);
        }
        
        .user-avatar {
            width: 100px;
            height: 100px;
            border-radius: 50%;
            margin: 0 auto 1rem;
            object-fit: cover;
            border: 3px solid var(--primary-light);
        }
        
        .user-placeholder {
            width: 100px;
            height: 100px;
            border-radius: 50%;
            margin: 0 auto 1rem;
            background-color: var(--primary-light);
            color: var(--primary);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 2rem;
            font-weight: 600;
            border: 3px solid var(--primary-light);
        }
        
        .user-name {
            font-weight: 600;
            font-size: 1.1rem;
            margin-bottom: 0.25rem;
        }
        
        .user-bio {
            font-size: 0.85rem;
            color: var(--gray);
            margin-bottom: 1rem;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }
        
        .user-followers {
            font-size: 0.85rem;
            color: var(--gray);
            margin-bottom: 1rem;
        }
        
        .follow-btn {
            display: inline-block;
            padding: 0.5rem 1.5rem;
            background-color: var(--primary);
            color: white;
            border: none;
            border-radius: 6px;
            font-weight: 500;
            transition: background-color 0.2s;
        }
        
        .follow-btn:hover {
            background-color: #0E42D2;
            color: white;
        }
        
        /* 4. 微型内容轮播 */
        .mini-content-carousel .carousel-inner {
            padding: 1rem 0;
        }
        
        .mini-content-carousel .carousel-item {
            padding: 0 0.75rem;
        }
        
        .mini-content-card {
            background-color: white;
            border-radius: 12px;
            overflow: hidden;
            box-shadow: var(--shadow);
            display: flex;
            height: 120px;
            transition: transform 0.3s, box-shadow 0.3s;
        }
        
        .mini-content-card:hover {
            transform: translateY(-3px);
            box-shadow: var(--shadow-hover);
        }
        
        .mini-content-img {
            width: 100px;
            flex-shrink: 0;
            object-fit: cover;
        }
        
        .mini-content-body {
            padding: 0.75rem;
            flex: 1;
            display: flex;
            flex-direction: column;
        }
        
        .mini-content-title {
            font-weight: 600;
            font-size: 0.95rem;
            margin-bottom: 0.25rem;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }
        
        .mini-content-meta {
            margin-top: auto;
            font-size: 0.75rem;
            color: var(--gray);
            display: flex;
            align-items: center;
        }
        
        .mini-content-meta i {
            margin-right: 0.25rem;
            font-size: 0.7rem;
        }
        
        /* 轮播控制按钮样式 */
        .carousel-control-prev,
        .carousel-control-next {
            width: 40px;
            height: 40px;
            background-color: white;
            border-radius: 50%;
            top: 50%;
            transform: translateY(-50%);
            box-shadow: var(--shadow);
            opacity: 0.8;
        }
        
        .carousel-control-prev:hover,
        .carousel-control-next:hover {
            opacity: 1;
        }
        
        .carousel-control-prev {
            left: -20px;
        }
        
        .carousel-control-next {
            right: -20px;
        }
        
        .carousel-control-prev-icon,
        .carousel-control-next-icon {
            width: 16px;
            height: 16px;
            background-size: 16px;
        }
        
        .carousel-control-prev-icon {
            background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23165DFF' viewBox='0 0 8 8'%3e%3cpath d='M5.25 0l-4 4 4 4 1.5-1.5L4.25 4l2.5-2.5L5.25 0z'/%3e%3c/svg%3e");
        }
        
        .carousel-control-next-icon {
            background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23165DFF' viewBox='0 0 8 8'%3e%3cpath d='M2.75 0l-1.5 1.5L3.75 4l-2.5 2.5L2.75 8l4-4-4-4z'/%3e%3c/svg%3e");
        }
        
        /* 响应式设计 */
        @media (max-width: 992px) {
            .fullwidth-carousel .carousel-item {
                height: 400px;
            }
            
            .carousel-control-prev {
                left: 10px;
            }
            
            .carousel-control-next {
                right: 10px;
            }
        }
        
        @media (max-width: 768px) {
            .page-title {
                font-size: 1.75rem;
            }
            
            .carousel-title {
                font-size: 1.25rem;
            }
            
            .fullwidth-carousel .carousel-item {
                height: 320px;
            }
            
            .fullwidth-carousel .carousel-title-lg {
                font-size: 1.5rem;
            }
            
            .carousel-card-img {
                height: 160px;
            }
        }
        
        @media (max-width: 576px) {
            .main-content {
                padding: 2rem 0;
            }
            
            .fullwidth-carousel .carousel-item {
                height: 250px;
            }
            
            .carousel-header {
                flex-direction: column;
                align-items: flex-start;
                gap: 0.5rem;
            }
            
            .mini-content-card {
                height: 100px;
            }
            
            .mini-content-img {
                width: 80px;
            }
        }
    </style>
</head>
<body>
    <!-- 导航栏 -->
    <nav class="navbar navbar-expand-lg">
        <div class="container">
            <a class="navbar-brand" href="#">社交平台</a>
            
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav ms-auto">
                    <li class="nav-item">
                        <a class="nav-link active" aria-current="page" href="#"><i class="fas fa-home me-1"></i> 首页</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#"><i class="fas fa-compass me-1"></i> 发现</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#"><i class="fas fa-users me-1"></i> 社区</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#"><i class="fas fa-bell me-1"></i> 通知</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#"><i class="far fa-user me-1"></i> 我的</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>
    
    <div class="container main-content">
        <!-- 页面标题 -->
        <div class="page-header">
            <h1 class="page-title">精选内容轮播展示</h1>
            <p class="page-desc">探索社交平台上的热门内容和活跃用户，这里展示了多种风格的轮播组件，用于不同场景的内容推荐。</p>
        </div>
        
        <!-- 1. 全屏宽幅轮播 - 适合展示精选内容 -->
        <div class="carousel-section">
            <div class="carousel-header">
                <h2 class="carousel-title"><i class="fas fa-newspaper"></i> 精选推荐</h2>
                <a href="#" class="carousel-more">查看全部 <i class="fas fa-angle-right"></i></a>
            </div>
            
            <div id="featuredCarousel" class="carousel slide fullwidth-carousel" data-bs-ride="carousel">
                <div class="carousel-inner">
                    <div class="carousel-item active">
                        <img src="https://picsum.photos/1200/500?random=1" class="carousel-img" alt="自然风光摄影">
                        <div class="carousel-caption">
                            <h3 class="carousel-title-lg">探索世界十大绝美自然景观</h3>
                            <p class="carousel-text">从壮丽的山脉到神秘的雨林，这些令人惊叹的自然景观值得一生去体验。本文带您领略大自然的鬼斧神工。</p>
                            <div class="carousel-user">
                                <img src="https://picsum.photos/100/100?random=101" class="carousel-avatar" alt="李明的头像">
                                <span class="carousel-username">李明 · 旅行摄影师</span>
                            </div>
                        </div>
                    </div>
                    <div class="carousel-item">
                        <img src="https://picsum.photos/1200/500?random=2" class="carousel-img" alt="城市夜景">
                        <div class="carousel-caption">
                            <h3 class="carousel-title-lg">全球五大不夜城的魅力夜景</h3>
                            <p class="carousel-text">当夜幕降临，这些城市展现出与白天截然不同的魅力。霓虹闪烁，灯火辉煌，构成一幅幅迷人的夜景画卷。</p>
                            <div class="carousel-user">
                                <div class="carousel-avatar" style="background-color: #E8F3FF; display: flex; align-items: center; justify-content: center; color: #165DFF; font-weight: 600;">王</div>
                                <span class="carousel-username">王芳 · 城市探索者</span>
                            </div>
                        </div>
                    </div>
                    <div class="carousel-item">
                        <img src="https://picsum.photos/1200/500?random=3" class="carousel-img" alt="美食制作">
                        <div class="carousel-caption">
                            <h3 class="carousel-title-lg">在家也能做的米其林级甜点</h3>
                            <p class="carousel-text">不需要专业设备，在家也能制作出令人惊艳的甜点。详细步骤解析，让你轻松掌握高级甜点制作技巧。</p>
                            <div class="carousel-user">
                                <img src="https://picsum.photos/100/100?random=103" class="carousel-avatar" alt="张伟的头像">
                                <span class="carousel-username">张伟 · 甜点师</span>
                            </div>
                        </div>
                    </div>
                </div>
                
                <button class="carousel-control-prev" type="button" data-bs-target="#featuredCarousel" data-bs-slide="prev">
                    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                    <span class="visually-hidden">上一页</span>
                </button>
                <button class="carousel-control-next" type="button" data-bs-target="#featuredCarousel" data-bs-slide="next">
                    <span class="carousel-control-next-icon" aria-hidden="true"></span>
                    <span class="visually-hidden">下一页</span>
                </button>
            </div>
        </div>
        
        <!-- 2. 卡片式轮播 - 适合展示热门帖子 -->
        <div class="carousel-section">
            <div class="carousel-header">
                <h2 class="carousel-title"><i class="fas fa-fire"></i> 热门帖子</h2>
                <a href="#" class="carousel-more">更多热门 <i class="fas fa-angle-right"></i></a>
            </div>
            
            <div id="postsCarousel" class="carousel slide card-carousel" data-bs-ride="carousel">
                <div class="carousel-inner">
                    <div class="carousel-item active">
                        <div class="row">
                            <div class="col-md-4">
                                <div class="carousel-card h-100">
                                    <img src="https://picsum.photos/600/400?random=10" class="carousel-card-img" alt="摄影作品">
                                    <div class="carousel-card-body">
                                        <h3 class="carousel-card-title">如何拍出令人惊艳的城市夜景</h3>
                                        <p class="carousel-card-text">分享几个城市夜景拍摄的小技巧，让你的作品在朋友圈脱颖而出。</p>
                                        <div class="carousel-card-meta">
                                            <span>2小时前</span>
                                            <span class="carousel-card-likes"><i class="fas fa-heart"></i> 328</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="carousel-card h-100">
                                    <img src="https://picsum.photos/600/400?random=11" class="carousel-card-img" alt="美食制作">
                                    <div class="carousel-card-body">
                                        <h3 class="carousel-card-title">周末 brunch 推荐：牛油果吐司的5种做法</h3>
                                        <p class="carousel-card-text">简单又美味的牛油果吐司，5种不同搭配，让你的周末早餐不再单调。</p>
                                        <div class="carousel-card-meta">
                                            <span>昨天</span>
                                            <span class="carousel-card-likes"><i class="fas fa-heart"></i> 542</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="carousel-card h-100">
                                    <img src="https://picsum.photos/600/400?random=12" class="carousel-card-img" alt="旅行照片">
                                    <div class="carousel-card-body">
                                        <h3 class="carousel-card-title">隐藏在山林中的绝美民宿</h3>
                                        <p class="carousel-card-text">远离城市喧嚣，这几家山间民宿让你与自然零距离接触。</p>
                                        <div class="carousel-card-meta">
                                            <span>3天前</span>
                                            <span class="carousel-card-likes"><i class="fas fa-heart"></i> 786</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="carousel-item">
                        <div class="row">
                            <div class="col-md-4">
                                <div class="carousel-card h-100">
                                    <img src="https://picsum.photos/600/400?random=13" class="carousel-card-img" alt="健身照片">
                                    <div class="carousel-card-body">
                                        <h3 class="carousel-card-title">办公室健身：3个缓解久坐疲劳的动作</h3>
                                        <p class="carousel-card-text">不需要器械，在办公室就能做的简单运动，有效缓解久坐带来的不适。</p>
                                        <div class="carousel-card-meta">
                                            <span>4天前</span>
                                            <span class="carousel-card-likes"><i class="fas fa-heart"></i> 412</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="carousel-card h-100">
                                    <img src="https://picsum.photos/600/400?random=14" class="carousel-card-img" alt="书籍推荐">
                                    <div class="carousel-card-body">
                                        <h3 class="carousel-card-title">2023年必读书单：改变思维的5本书</h3>
                                        <p class="carousel-card-text">这些书籍将帮助你拓宽视野，改变思维方式，值得细细品读。</p>
                                        <div class="carousel-card-meta">
                                            <span>1周前</span>
                                            <span class="carousel-card-likes"><i class="fas fa-heart"></i> 635</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="carousel-card h-100">
                                    <img src="https://picsum.photos/600/400?random=15" class="carousel-card-img" alt="科技产品">
                                    <div class="carousel-card-body">
                                        <h3 class="carousel-card-title">适合旅行者的5款便携电子产品</h3>
                                        <p class="carousel-card-text">轻巧便携又实用，这些电子产品让你的旅行更加便捷舒适。</p>
                                        <div class="carousel-card-meta">
                                            <span>1周前</span>
                                            <span class="carousel-card-likes"><i class="fas fa-heart"></i> 298</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <button class="carousel-control-prev" type="button" data-bs-target="#postsCarousel" data-bs-slide="prev">
                    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                    <span class="visually-hidden">上一页</span>
                </button>
                <button class="carousel-control-next" type="button" data-bs-target="#postsCarousel" data-bs-slide="next">
                    <span class="carousel-control-next-icon" aria-hidden="true"></span>
                    <span class="visually-hidden">下一页</span>
                </button>
            </div>
        </div>
        
        <!-- 3. 用户推荐轮播 - 适合展示活跃用户 -->
        <div class="carousel-section">
            <div class="carousel-header">
                <h2 class="carousel-title"><i class="fas fa-users"></i> 你可能感兴趣的用户</h2>
                <a href="#" class="carousel-more">查看更多 <i class="fas fa-angle-right"></i></a>
            </div>
            
            <div id="usersCarousel" class="carousel slide user-carousel" data-bs-ride="carousel">
                <div class="carousel-inner">
                    <div class="carousel-item active">
                        <div class="row">
                            <div class="col-md-2 col-sm-3 col-4">
                                <div class="user-card">
                                    <img src="https://picsum.photos/200/200?random=20" class="user-avatar" alt="陈静的头像">
                                    <h3 class="user-name">陈静</h3>
                                    <p class="user-bio">插画师，喜欢创作治愈系插画作品</p>
                                    <p class="user-followers">2.4k 粉丝</p>
                                    <button class="follow-btn">关注</button>
                                </div>
                            </div>
                            <div class="col-md-2 col-sm-3 col-4">
                                <div class="user-card">
                                    <div class="user-placeholder">刘</div>
                                    <h3 class="user-name">刘强</h3>
                                    <p class="user-bio">健身教练，分享科学健身知识</p>
                                    <p class="user-followers">1.8k 粉丝</p>
                                    <button class="follow-btn">关注</button>
                                </div>
                            </div>
                            <div class="col-md-2 col-sm-3 col-4">
                                <div class="user-card">
                                    <img src="https://picsum.photos/200/200?random=22" class="user-avatar" alt="赵敏的头像">
                                    <h3 class="user-name">赵敏</h3>
                                    <p class="user-bio">读书爱好者，分享读书笔记</p>
                                    <p class="user-followers">3.7k 粉丝</p>
                                    <button class="follow-btn">已关注</button>
                                </div>
                            </div>
                            <div class="col-md-2 col-sm-3 col-4">
                                <div class="user-card">
                                    <img src="https://picsum.photos/200/200?random=23" class="user-avatar" alt="孙亮的头像">
                                    <h3 class="user-name">孙亮</h3>
                                    <p class="user-bio">独立音乐人，分享原创作品</p>
                                    <p class="user-followers">5.2k 粉丝</p>
                                    <button class="follow-btn">关注</button>
                                </div>
                            </div>
                            <div class="col-md-2 col-sm-3 col-4">
                                <div class="user-card">
                                    <div class="user-placeholder">周</div>
                                    <h3 class="user-name">周琳</h3>
                                    <p class="user-bio">旅行博主，探索小众目的地</p>
                                    <p class="user-followers">4.1k 粉丝</p>
                                    <button class="follow-btn">关注</button>
                                </div>
                            </div>
                            <div class="col-md-2 col-sm-3 col-4">
                                <div class="user-card">
                                    <img src="https://picsum.photos/200/200?random=25" class="user-avatar" alt="吴杰的头像">
                                    <h3 class="user-name">吴杰</h3>
                                    <p class="user-bio">游戏开发者，分享开发经验</p>
                                    <p class="user-followers">2.8k 粉丝</p>
                                    <button class="follow-btn">关注</button>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="carousel-item">
                        <div class="row">
                            <div class="col-md-2 col-sm-3 col-4">
                                <div class="user-card">
                                    <img src="https://picsum.photos/200/200?random=26" class="user-avatar" alt="郑婷的头像">
                                    <h3 class="user-name">郑婷</h3>
                                    <p class="user-bio">美食博主，分享家常菜做法</p>
                                    <p class="user-followers">6.3k 粉丝</p>
                                    <button class="follow-btn">关注</button>
                                </div>
                            </div>
                            <div class="col-md-2 col-sm-3 col-4">
                                <div class="user-card">
                                    <div class="user-placeholder">林</div>
                                    <h3 class="user-name">林浩</h3>
                                    <p class="user-bio">摄影师，专注自然风光拍摄</p>
                                    <p class="user-followers">8.7k 粉丝</p>
                                    <button class="follow-btn">已关注</button>
                                </div>
                            </div>
                            <div class="col-md-2 col-sm-3 col-4">
                                <div class="user-card">
                                    <img src="https://picsum.photos/200/200?random=28" class="user-avatar" alt="黄欣的头像">
                                    <h3 class="user-name">黄欣</h3>
                                    <p class="user-bio">UI设计师，分享设计灵感</p>
                                    <p class="user-followers">3.2k 粉丝</p>
                                    <button class="follow-btn">关注</button>
                                </div>
                            </div>
                            <div class="col-md-2 col-sm-3 col-4">
                                <div class="user-card">
                                    <img src="https://picsum.photos/200/200?random=29" class="user-avatar" alt="杨光的头像">
                                    <h3 class="user-name">杨光</h3>
                                    <p class="user-bio">前端开发者，分享技术心得</p>
                                    <p class="user-followers">2.5k 粉丝</p>
                                    <button class="follow-btn">关注</button>
                                </div>
                            </div>
                            <div class="col-md-2 col-sm-3 col-4">
                                <div class="user-card">
                                    <div class="user-placeholder">马</div>
                                    <h3 class="user-name">马明</h3>
                                    <p class="user-bio">健身教练，专注力量训练</p>
                                    <p class="user-followers">4.8k 粉丝</p>
                                    <button class="follow-btn">关注</button>
                                </div>
                            </div>
                            <div class="col-md-2 col-sm-3 col-4">
                                <div class="user-card">
                                    <img src="https://picsum.photos/200/200?random=31" class="user-avatar" alt="陈曦的头像">
                                    <h3 class="user-name">陈曦</h3>
                                    <p class="user-bio">作家，分享创作历程和心得</p>
                                    <p class="user-followers">7.2k 粉丝</p>
                                    <button class="follow-btn">关注</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <button class="carousel-control-prev" type="button" data-bs-target="#usersCarousel" data-bs-slide="prev">
                    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                    <span class="visually-hidden">上一页</span>
                </button>
                <button class="carousel-control-next" type="button" data-bs-target="#usersCarousel" data-bs-slide="next">
                    <span class="carousel-control-next-icon" aria-hidden="true"></span>
                    <span class="visually-hidden">下一页</span>
                </button>
            </div>
        </div>
        
        <!-- 4. 微型内容轮播 - 适合展示简短动态 -->
        <div class="carousel-section">
            <div class="carousel-header">
                <h2 class="carousel-title"><i class="fas fa-comment-dots"></i> 最新动态</h2>
                <a href="#" class="carousel-more">查看全部 <i class="fas fa-angle-right"></i></a>
            </div>
            
            <div id="updatesCarousel" class="carousel slide mini-content-carousel" data-bs-ride="carousel">
                <div class="carousel-inner">
                    <div class="carousel-item active">
                        <div class="row">
                            <div class="col-md-3 col-sm-6">
                                <div class="mini-content-card">
                                    <img src="https://picsum.photos/200/200?random=40" class="mini-content-img" alt="动态图片">
                                    <div class="mini-content-body">
                                        <h4 class="mini-content-title">今天去了新开的咖啡馆，环境超赞！</h4>
                                        <div class="mini-content-meta">
                                            <i class="far fa-user"></i> 张明 · 30分钟前
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-3 col-sm-6">
                                <div class="mini-content-card">
                                    <img src="https://picsum.photos/200/200?random=41" class="mini-content-img" alt="动态图片">
                                    <div class="mini-content-body">
                                        <h4 class="mini-content-title">分享一组周末拍摄的城市建筑照片</h4>
                                        <div class="mini-content-meta">
                                            <i class="far fa-user"></i> 王芳 · 2小时前
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-3 col-sm-6">
                                <div class="mini-content-card">
                                    <img src="https://picsum.photos/200/200?random=42" class="mini-content-img" alt="动态图片">
                                    <div class="mini-content-body">
                                        <h4 class="mini-content-title">新做的提拉米苏，味道还不错！</h4>
                                        <div class="mini-content-meta">
                                            <i class="far fa-user"></i> 李华 · 5小时前
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-3 col-sm-6">
                                <div class="mini-content-card">
                                    <img src="https://picsum.photos/200/200?random=43" class="mini-content-img" alt="动态图片">
                                    <div class="mini-content-body">
                                        <h4 class="mini-content-title">完成了第一个马拉松，太有成就感了！</h4>
                                        <div class="mini-content-meta">
                                            <i class="far fa-user"></i> 赵伟 · 昨天
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="carousel-item">
                        <div class="row">
                            <div class="col-md-3 col-sm-6">
                                <div class="mini-content-card">
                                    <img src="https://picsum.photos/200/200?random=44" class="mini-content-img" alt="动态图片">
                                    <div class="mini-content-body">
                                        <h4 class="mini-content-title">推荐一本最近在读的好书，很有启发</h4>
                                        <div class="mini-content-meta">
                                            <i class="far fa-user"></i> 孙亮 · 昨天
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-3 col-sm-6">
                                <div class="mini-content-card">
                                    <img src="https://picsum.photos/200/200?random=45" class="mini-content-img" alt="动态图片">
                                    <div class="mini-content-body">
                                        <h4 class="mini-content-title">分享我的桌面整理，工作效率提升不少</h4>
                                        <div class="mini-content-meta">
                                            <i class="far fa-user"></i> 周琳 · 2天前
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-3 col-sm-6">
                                <div class="mini-content-card">
                                    <img src="https://picsum.photos/200/200?random=46" class="mini-content-img" alt="动态图片">
                                    <div class="mini-content-body">
                                        <h4 class="mini-content-title">新买的相机到了，迫不及待想出去拍照</h4>
                                        <div class="mini-content-meta">
                                            <i class="far fa-user"></i> 吴杰 · 2天前
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-3 col-sm-6">
                                <div class="mini-content-card">
                                    <img src="https://picsum.photos/200/200?random=47" class="mini-content-img" alt="动态图片">
                                    <div class="mini-content-body">
                                        <h4 class="mini-content-title">周末去爬山，看到了超美的日落</h4>
                                        <div class="mini-content-meta">
                                            <i class="far fa-user"></i> 郑婷 · 3天前
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <button class="carousel-control-prev" type="button" data-bs-target="#updatesCarousel" data-bs-slide="prev">
                    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                    <span class="visually-hidden">上一页</span>
                </button>
                <button class="carousel-control-next" type="button" data-bs-target="#updatesCarousel" data-bs-slide="next">
                    <span class="carousel-control-next-icon" aria-hidden="true"></span>
                    <span class="visually-hidden">下一页</span>
                </button>
            </div>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        // 初始化所有轮播
        document.addEventListener('DOMContentLoaded', function() {
            // 配置轮播自动播放
            const carousels = [
                new bootstrap.Carousel(document.getElementById('featuredCarousel'), {
                    interval: 5000,
                    wrap: true
                }),
                new bootstrap.Carousel(document.getElementById('postsCarousel'), {
                    interval: 6000,
                    wrap: true
                }),
                new bootstrap.Carousel(document.getElementById('usersCarousel'), {
                    interval: 7000,
                    wrap: true
                }),
                new bootstrap.Carousel(document.getElementById('updatesCarousel'), {
                    interval: 4000,
                    wrap: true
                })
            ];
            
            // 关注按钮交互
            document.querySelectorAll('.follow-btn').forEach(button => {
                button.addEventListener('click', function() {
                    if (this.textContent === '关注') {
                        this.textContent = '已关注';
                        this.classList.add('following');
                        this.style.backgroundColor = 'var(--light)';
                        this.style.color = 'var(--dark)';
                    } else {
                        this.textContent = '关注';
                        this.classList.remove('following');
                        this.style.backgroundColor = 'var(--primary)';
                        this.style.color = 'white';
                    }
                });
            });
        });
    </script>
</body>
</html>
    
